<template>
  <div class="form-container">

    <!-- 表单主体 -->
    <el-form :model="formData" label-width="120px" label-position="right" class="form-body">

      $FORMITEM$

      <!-- 按钮区域 -->
      <el-form-item class="form-buttons">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "$TABLENAME$-add"
});

import { ref } from 'vue';
import { User, Camera } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { addObj } from '@/api/$TABLENAME$';
import { useRouter } from "vue-router";
const router = useRouter();

// 表单数据模型
const formData = ref({
  $FORMATTRIBUTE$
});






// 提交表单
const handleSubmit = async () => {
  console.log('表单数据:', formData.value);
  const res = await addObj(formData.value);
  if(res.code === 20000) {
    ElMessage.success('添加成功');
    router.push('/$TABLENAME$/list'); 
  } else {
    ElMessage.error(res.msg || '添加失败');
  }
};

// 重置表单
const handleReset = () => {
  formData.value = {
    $FORMATTRIBUTE$
  };
  ElMessage.info('表单已重置');
};
</script>

<style lang="scss" scoped>
.form-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.form-header {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  background: linear-gradient(135deg, #409EFF, #337ecc);
  color: white;

  h1 {
    font-size: 22px;
    font-weight: 500;
    margin-left: 12px;
  }

  .header-icon {
    font-size: 24px;
  }
}

.form-body {
  padding: 30px;

  :deep(.el-form-item) {
    margin-bottom: 24px;
  }

  :deep(.el-form-item__label) {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }

  :deep(.el-input__wrapper) {
    border-radius: 6px;
    box-shadow: 0 0 0 1px #dcdfe6 inset;

    &:hover {
      box-shadow: 0 0 0 1px #c0c4cc inset;
    }

    &.is-focus {
      box-shadow: 0 0 0 1px #409EFF inset;
    }
  }
}


.form-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center;

  :deep(.el-form-item__content) {
    justify-content: center;
  }

  .el-button {
    width: 120px;
    height: 42px;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.3s;

    &:first-child {
      background-color: #409EFF;
      color: white;
      border: none;

      &:hover {
        background-color: #337ecc;
      }
    }

    &:last-child {
      background-color: #fff;
      color: #606266;
      border: 1px solid #dcdfe6;

      &:hover {
        color: #409EFF;
        border-color: #409EFF;
      }
    }
  }
}
</style>